<template>
	<view v-show="showModal" id="j-show-modal">
		<view class="j-modal-bg" @tap="onMaskCancel" v-if="showMask"></view>
		<view class="j-modal-outer">
			<view class="j-modal-inner">
				<view class="j-modal-title" v-if="showTitle">
					{{title}}
				</view>
				<view ref="content" class="j-modal-content" :style="{textAlign:align}" v-if="showContent">
					<view v-html="content" v-if="isHTML"></view>
					<view v-else>{{content}}</view>
				</view>
				<view class="j-model-operation">
					<view class="j-modal-cancel" v-if="showCancel" @tap="onCancel">{{cancelText ? cancelText : $t('JLink.Cancel.Value')}}</view>
					<view class="j-modal-confirm" v-if="showConfirm" @tap="onOk">{{okText ? okText : $t('JLink.Ok.Value')}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				showModal:false,
				title:'', //标题
				content:'',//内容
				align:'center',// 内容显示方式
				showMask:true,//显示遮罩
				showTitle:true,//显示标题
				showContent:true,//显示内容
				showCancel:true,//显示取消按钮
				showConfirm:true,//显示确认按钮
				isHTML:false,// 是否HTML文本
				isDOM:false,//是否是DOM节点
				maskCloseAble:true,//是否允许点击遮罩层关闭
				okText:'',
				cancelText:'',
				ok:null,
				cancel:null
			}
		},
		mounted:function(){
			this.onOpenModal()
			if(typeof this.content === 'object' && this.content.nodeType === 1){
				this.$refs.content.$el.innerHTML = ''
				this.content.style.display="block"
				this.$refs.content.$el.append(this.content)
			}
		},
		methods:{
			onOpenModal(){
				this.showModal = true
			},
			onCloseModal(){
				console.log('onCloseModal');
				this.$el.parentNode.removeChild(this.$el)
				this.showModal = false
			},
			onMaskCancel(){
				return
				if(this.maskCloseAble){
					this.onCloseModal()
				}
			},
			onOk(ev){
				this.onCloseModal()
				if(typeof this.ok === 'function'){
					this.ok(ev)
				}
			},
			onCancel(ev){
				this.onCloseModal()
				if(typeof this.cancel === 'function'){
					this.cancel(ev)
				}
			},
			
		}
	}
</script>

<style>
	.j-modal-bg{
		position:fixed;
		top: 0;
		left: 0;
		z-index: 1000;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		background: rgba(0,0,0,0.5);
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.j-modal-outer{
		position: absolute;
		z-index: 1001;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		text-align: center;
		overflow: hidden;
		background:rgba(255,255,255,1);
		border-radius: 10px;
		padding:20px;
	}
	.j-modal-inner{
		width: auto;
	}
	.j-modal-title{
		color: #464646;
		font-weight: bold;
	}
	.j-modal-content{
		width: 65vw;
		max-height: 60vh;
		overflow: auto;
		margin:30px 0;
		color: #9A9A9A;
	}
	.j-model-operation{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
	}
	.j-modal-cancel{
		width: 100%;
		background: #F6F7FB;
		color: #000000;
		padding:8px 16px;
		border-radius: 24px;
		margin:0 5px;
	}
	.j-modal-confirm{
		width: 100%;
		background: #FF0025;
		color: #FFFFFF;
		padding:8px 16px;
		border-radius: 24px;
		margin:0 5px;
	}
</style>